<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    * {
        box-sizing: border-box;
    }
    a{

        text-decoration: coral;
        color: white;

    }
    body{
        background-color:bisque;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
        margin: 0;
        padding: 20px;
    }
    div{
        text-align: center;
        color: darksalmon;

    }
    .btn {
        background-color:#9f68e0;
        color: #fff;
        border: 0;
        border-radius: 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
        padding: 15px 30px;
        font-size: 16px;
        cursor: alias;
    }
    .container {
        background-color: antiquewhite;
        border-radius: 20px;
        box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
        padding: 80px 50px;
        text-align: center;
        max-width: 100%;
        width: 600px;
        margin:0 auto;
        margin-top: 40px;
    }

</style>
<body>
<h1 style="text-align:center;color: gold;font-family: 'Calibri Light';margin-top: 50px;font-size: 80px">Welcome To Here!</h1>
<div class="container" >
    <h2 style="text-align: center;margin-top: 0px;color: dodgerblue" >Please Choose One Below You Want To See</h2>
    <button class="btn" style="margin-top: 10px"><a href="query.jsp" >All Student</a></button>
    <br>
    <button class="btn" style="margin-top: 20px"> <a href="queryIndividual.jsp" >Individual Student</a></button>
    <br>
    <button class="btn" style="margin-top: 20px"> <a href="gradeRatio.jsp" >gradeRatio</a></button>
    <br>
    <button class="btn" style="margin-top: 20px"> <a href="sexRatio.jsp" >SexRatio</a></button>
    <br>
    <button class="btn" style="margin-top: 20px"> <a href="upload.jsp" >BatchInsert</a></button>

</div>

</body>
</html>